<template>
 <view>
  <!-- 头部 -->
  <view class="head">
   <view class="head-top">
    <text class="big">367.70</text>
    <text class="small">最新金价(元/克)</text>
   </view>
   <view class="head-bottom">
    <text class="big">-0.72</text>
    <text class="small">今日跌涨起伏（%）</text>
   </view>
   <view class="head-bottom">
    <text class="big">500.00</text>
    <text class="small">起购金额</text>
   </view>
  </view>
  <!-- 主体 -->
  <view class="main">
   <view class="title"><text>金价走势</text></view>
   <view class="lineChart">
    <!-- 线形图 -->
    <view class="charts-box">
      <qiun-data-charts
        type="line"
        :chartData="chartData"
        background="none"
      />
    </view>
    <view class="lineChart-bot">
     <text :class="{blue:item.id == chartsPoint}"
     v-for="item in charts" :key='item.id' @click="chart(item.id)">{{item.text}}</text>
    </view>
   </view>
   <view class="title"><text>安全保障</text></view>
   <view class="guarantee">
   	<view class="icon_box">
   		<view class="one_icon" v-for="item in iconData" :key=item.id>
   			<image :src="item.src" mode="" v-if="item.src.length>0"></image>
			<text>{{item.text}}</text>
   		</view>
   	</view>
	<view class="guarantee_text">
		<text>
			本产品为民生银行推出的积存金产品，通过民生银行电子账户
			进行交易，黄金价格实时波动。产品风险等级为中等，不保订
			最低收益， 投资风险由投资人本人承担
		</text>
	</view>
   </view>
   <!-- 交易规则 -->
   <view class="paging">
       <text :class="{blue:item.id == pagPoint}" v-for="item in paging" :key='item.id'
       @click="pagClick(item.id)">{{item.text}}</text>
      </view>
	  <!-- 滑动模块 -->
	  <view class="">
	  	<swiper style="height: 1120rpx;">
	  		<swiper-item>
	  			<view class="swiper-item" >
					<text class="title_text">购买与领取</text>
					<view class="main_text">
						<text class="mt_letf">购买金额</text>
						<text class="mt_right">500元起购，且为1元的整倍数</text>
					</view>
					<view class="main_text">
						<text class="mt_letf">年龄范围</text>
						<text class="mt_right">18岁及以上</text>
					</view>
					<view class="main_text">
						<text class="mt_letf">领取金额</text>
						<text class="mt_right">1克领取:剩余持有克数不足1克时，需全部领取</text>
					</view>
					<view class="main_text">
						<text class="mt_letf">交易时间</text>
						<text class="mt_right"> 周一9点~周六凌号4点开放变易(法定节日及民 
												生银行公告的休市除外) 实时成交:交易时间 
												内黄金价格实时变动，购买领取结果全以民生银
												行为准 </text>
					</view>
					<view class="main_text">
						<text class="mt_letf">兑换实金</text>
						<text class="mt_right">持有满5克及以上， 可预约前往指定民生银行网 
												点兑换实物黄金</text>
					</view>
					<text class="title_text">收益与费用</text>
					<view class="main_text">
						<text class="mt_letf2">费用规则</text>

							<text>生息规则 每日按持有克数的年化0.2%计算“黄金利息”，累积满0.0001克后发放至黄金账户;15点前购买成功，当日开始生息
							</text>
					</view>
					<view class="main_text">
						<text class="mt_letf2">费用规则</text>
						<view class="need_margin">
							<text class="small_text">1)购买无手续费</text>
							<text class="small_text">2)领取时，按成交金额的0.3%收取手续费，单笔最低0.01元
							</text>
							<text class="small_text">3)兑换实物黄金需按兑换的黄金克数支付手续费，具体费用以民生银行现场确认为准
							</text>
						</view>
					</view>
				</view>
	  		</swiper-item>
	  		<swiper-item>
	  			<view class="swiper-item" >
					<view class="" v-for="item in titleData" >
						<text class="title_text">基本信息</text>
						<view class="main_text">
							<text class="mt_letf">基金名称</text>
							<text class="mt_right">{{item.name}}</text>
						</view>
						<view class="main_text">
							<text class="mt_letf">发行机构</text>
							<text class="mt_right">{{item.publish}}</text>
						</view>
						<view class="main_text">
							<text class="mt_letf">黄金价格</text>
							<text class="mt_right">{{item.price}}</text>
						</view>
						<view class="main_text">
							<text class="mt_letf">风险等级</text>
							<text class="mt_right">{{item.risk}}</text>
						</view>
					</view>
					<view class="" v-for="item in protocolData">
						<text class="title_text">用户协议</text>
						<text class="protocol_text">{{item.client}}</text>
						<text class="protocol_text">{{item.user}}</text>
						<text class="protocol_text">{{item.publis}}</text>
						<text class="protocol_text">{{item.account}}</text>
						<text class="protocol_text">{{item.user}}</text>
					</view>
				</view>
	  		</swiper-item>
			<swiper-item>
				<view class="swiper-item"></view>
			</swiper-item>
	  	</swiper>
	  </view>
	  <view class="buy_btn">
	  	立即购买
	  </view>
  </view>
 </view>
</template>

<script>
 export default {
  data() {
   return {
    chartData:{
     "categories": [
      "02-01",
      "02-02",
      "02-03",
      "02-04",
      "02-05",
      "02-06",
      "02-07"
     ],
     "series": [
      {
       "name": "汇添富双利卷B",
       "data": [
        365.63,
        378.60,
        375.21,
        391.56,
        365.63,
        380.21,
        383.89
       ]
      }
     ]
    },
    charts:[
     {id:0,text:'分时'},
     {id:1,text:'近一月'},
     {id:2,text:'近半年'},
     {id:3,text:'近一年'},
    ],
    chartsPoint:0,
	iconData:[
		{
			id:1,
			src:"/static/gold/g_one.png",
			text:"知名金融机构"
		},
		{
			id:2,
			src:"/static/gold/g_two.png",
			text:"精选优质产品"
		},
		{
			id:3,
			src:"/static/gold/g_three.png",
			text:"监管机构备案"
		}
	],
	paging:[
	     {id:0,text:'交易规则'},
	     {id:1,text:'信息披露'},
	     {id:2,text:'常见问题'},
	    ],
	    pagPoint:0,
		titleData:[
			{id:1,name:"中和证券",publish:"中信银行和平经济",price:"由国家规定和中信部门共同定制",risk:"中等"},
		],
		protocolData:[
			{id:1,client:"《客户管理协议》",account:"《账户管理协议》",publis:"《中信银行协议》",user:"《个人使用协议》"}
		]
   }
  },
  methods: {
   chart(id){
    this.chartsPoint = id
   },
   pagClick(id){
       this.pagPoint = id
      },
  }
 }
</script>

<style lang="scss">
 // 头部
 .head{
  width: 750rpx;
  height: 260rpx;
  background-image: url(@/static/gold/backgroundImg.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
  padding-top: 50rpx;
  padding-bottom: 80rpx;
  .head-top{
   width: 100%;
   text-align: center;
  }
  .big{
   font-size: 60rpx;
   color: #fff;
   font-weight: bold;
   display: block;
   margin-bottom: 15rpx;
  }
  .small{
   font-size: 24rpx;
   color: #fff;
  }
  .head-bottom{
   text-align: center;
   .big{
    font-size: 40rpx;
    margin-bottom: 8rpx;
   }
  }
 }
 // 标题
 .title{
  font-size: 30rpx;
  font-weight: bolder;
  display: flex;
  align-items: center;
  margin: 20rpx 0;
 }
 //标题伪元素
 .title::before{
  content:' ';
  display:block;
  width: 8rpx;
  height: 30rpx;
  border-radius: 6rpx;
  background-color: #3476f1;
  margin-left: 24rpx;
  margin-right: 10rpx;
 }
 // 主体
 .main{
  width: 750rpx;
  transform:translateY(-30rpx);
  background-color: #fff;
  padding-top: 20rpx;
  margin-bottom: -30rpx;
  border-radius: 30rpx 30rpx 0 0;
 }
 .lineChart{
  width: 702rpx;
  height: 570rpx;
  margin: 0 auto;
  padding: 30rpx;
  box-sizing: border-box;
  box-shadow: 0 0 10rpx #f1f1f1;
 }
 //线形图
 .charts-box{
   width: 100%;
   height:470rpx;
 }
 .lineChart-bot{
  width: 100%;
  display: flex;
  text{
   text-align: center;
   flex-grow: 1;
   font-size: 32rpx;
   color: #999;
   border: 1px solid #ddd;
   padding: 5rpx 0;
  }
  .blue{
   background-color: #3476f1;
   border: 1px solid #3476f1;
   color: #fff;
  }
 }
 // 安全保障
 .guarantee{
	 padding: 30rpx;
	 width: 90%;
	 margin: 0 auto;
	 box-shadow: 0 0 10rpx #f1f1f1 ;
	 .icon_box{
		 padding: 30rpx;
		 border-bottom: 1px solid #fbfbfb;
		 width: 90%;
		 margin: 0 auto;
		 .one_icon{
			 display: flex;
			 flex-direction: column;
			 align-items: center;
		 }
		 display: flex;
		 justify-content: space-between;
		 font-size: 24rpx;
		 color: #666666;
		 image{
			 width: 94rpx;
			 height: 94rpx;
			 display: block;
			 margin-bottom: 30rpx;
		 }
	 }
	 .guarantee_text{
		width: 90%;
		margin: 0 auto;
		font-size: 22rpx;
		color: #999999;
		padding: 30rpx;
		line-height: 44rpx;
	 }
	 }
	 // 交易规则
	 .paging{
	   width: 702rpx;
	   margin: 0 auto;
	   padding: 30rpx 0;
	   text{
	    margin-right: 60rpx;
	    font-size: 24rpx;
	    color: #999;
	   }
	   .blue{
	    font-size: 30rpx;
	    color: #3476F1;
	    font-weight: bold;
	    position: relative;
	   }
	   .blue::before{
	    content: " ";
	    width: 56rpx;
	    height: 8rpx;
	    background-color: #3476F1;
	    display: block;
	    position: absolute;
	    left: 34rpx;
	    bottom: -15rpx;
	   }
	  }
	  // 滑动模块
	  .swiper-item{
		  font-size: 24rpx;
		  color: #333333;
		  line-height: 44rpx;
		  padding: 30rpx;
		   box-shadow: 0 0 10rpx #f1f1f1 ;
		  .title_text{
			  font-size: 28rpx;
			  color: #999999;
			  margin-bottom: 20rpx;
			  display: block;
		  }
		  .main_text{
			  display: flex;
			  padding: 10rpx;
			  border-top: 1px solid #fbfbfb;
			  border-bottom: 1px solid #fbfbfb;
			  box-sizing: border-box;
			  .mt_letf{
				  color: #999999;
				  margin-right: 30rpx;
				  width: 120rpx;
			  }
			  .small_text{
				 display: block; 
			  }
			  .mt_letf2{
				 color: #999999;
				 width: 344rpx; 
			  }
			  .need_margin{
				  margin-left: -70rpx;
			  }
		  }
		  .protocol_text{
			  display: block;
			  padding: 10rpx;
			  border-top: 1px solid #fbfbfb;
			  border-bottom: 1px solid #fbfbfb;
		  }
		  }
		  .buy_btn{
			  height: 100rpx;
			  line-height: 100rpx;
			  font-size: 28rpx;
			  color: #FFFFFF;
			  text-align: center;
			  background-color: #3476f1;
		  }
</style>